<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年08月16日 12:21
 * @Copyright:  2022-2023
!-->
<template>
  <div>
    <div v-for="item in commentList" :key="item.id">
      <div class="comment-list">
        <div class="left p1" @click="handleUserCard(item.user.id)">
          <img v-if="item.user" :src="item.user.avatar ? item.user.avatar:defaultAvatar" onerror="onerror=null;src=defaultAvatar"  alt=""/>
          <img v-else :src="defaultAvatar"  alt=""/>
        </div>
        <div class="right p1">
          <div class="rightTop" v-if="item.user">
            <el-link class="userName" :underline="false">{{item.user.userName}}</el-link>
            <span class="timeAgo" v-if="item['createTime']">{{formatToSubDay(item['createTime'])}}前</span>
            <span class="timeAgo" v-else>刚刚</span>
          </div>
          <!-- 评论内容 -->
          <div class="comment-content" id="commentContent" v-highlight v-html="markdownToHtml(item.content)"></div>
          <div class="comment-tags">
            <el-link class="b1" :underline="false" @click="replyTo(item)" v-if="level < maxReplyLevel">
              <svg-icon icon-class="callback" />{{item.replyCount}}
            </el-link>
            <!--  <el-link class="b1" :underline="false" @click="report(item)">举报</el-link>-->
            <el-link class="b1" :underline="false" @click="handleOptions(item, 'LIKE')">
              <svg-icon v-if="item.dvLike === 1" icon-class="like2" />
              <svg-icon v-else icon-class="like" />赞{{item.likeCount}}
            </el-link>
            <el-link class="b1" :underline="false" @click="handleOptions(item, 'DISLIKE')">
              <svg-icon v-if="item.dvDislike === 1" icon-class="dislike2" />
              <svg-icon v-else icon-class="dislike" />踩{{item.dislikeCount}}
            </el-link>
            <el-link class="b1" v-if="![null, '', undefined].includes(token) && user.id === item.userId" :underline="false" @click="delComment(item)">
              <svg-icon icon-class="delete" />
            </el-link>
          </div>
          <div class="comment-list-child">
            <CommentBox
              class="comment-box"
              :toCommentInfo="toCommentInfo"
              :article="article"
              :commentInfo="commentInfo"
              :id="item.id"
              @cancelBox="cancelBox(item.id)"
              @refreshCommentList="refreshCommentList"
            ></CommentBox>
            <CommentList
              v-if="item['childCommentList'] !== null && item['childCommentList'].length > 0"
              class="comment-style"
              :level="level + 1"
              :maxReplyLevel="maxReplyLevel"
              :id="'comment-style:' + item.id"
              :commentList="item['childCommentList']"
              :commentInfo="commentInfo"
              :article="article"
              @refreshCommentList="refreshCommentList"
            ></CommentList>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import store from "@/store";
import { Vue, Component, Prop } from "vue-property-decorator";
import { formatToSubDay } from "@/utils/DateUtil";
import CommentBox from '@/components/CommentBox/index.vue';
import { markdownToHtml } from "@/utils/WordUtil";
import { insertOrUpdateCommentOptions } from "@/api/blog/commentOptions";
import { delComment } from "@/api/blog/comment";

@Component({
  name: 'CommentList',
  components: { CommentBox },
  methods: { markdownToHtml, formatToSubDay }
})
export default class CommentList extends Vue {

  /** 父级组件传过来的评论列表 */
  @Prop()
  public commentList:any;

  /** 评论信息主题 */
  @Prop()
  public commentInfo:any;

  /** 递归组件的嵌套层级，递归了1层、2层、3层、4层、5层，在最后一层可以禁止回复，拒绝无休止的评论 */
  @Prop({ default: 1 })
  public level:any;

  /** 控制最大评论层级 */
  @Prop({ default: 5 })
  public maxReplyLevel:any;

  /** 文章信息 */
  @Prop()
  public article:any;

  /** 默认头像 */
  public defaultAvatar:any = this.$SysConf.defaultAvatar;

  /** token */
  get token() {
    return store.getters.token;
  }

  /** 当前登录用户信息 */
  get user() {
    return store.getters.userInfo;
  }

  /** 评论对象信息 */
  private toCommentInfo: any = {
    commentId: '',
    userId: ''
  }

  private mounted() {
    this.addExpand();
  }

  /** 回复 */
  public replyTo(item: any) {
    const el = document.getElementById(item.id);
    if (el != null) {
      const display = el.style.display;
      if (display === 'none' || display === ''){
        const lists = document.getElementsByClassName("comment-box");
        for (let i = 0; i < lists.length; i++) {
          const el: any = lists[i];
          el.style.display = 'none';
        }
        el.style.display = 'block';
      } else {
        el.style.display = 'none';
      }
    }
    this.toCommentInfo.commentId = item.id;
    this.toCommentInfo.userId = item.userId;
  }

  /** 举报 */
  public report(item: any) {

  }

  /** 删除评论 */
  public delComment(item: any) {
    if (item['childCommentList'] !== null && item['childCommentList'].length > 0) {
      this.$confirm('此操作将把本评论和子评论删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delComment(item.id).then((res: any) => {
          this.$modal.msgSuccess(res.msg);
          this.refreshCommentList();
        })
      }).catch(() => {});
    } else {
      delComment(item.id).then((res: any) => {
        this.$modal.msgSuccess(res.msg);
        this.refreshCommentList();
      })
    }
  }

  /** 取消评论 */
  public cancelBox(commentId:string) {
    const el = document.getElementById(commentId);
    if (el != null) {
      el.style.display = 'none';
    }
  }

  /** 刷新评论列表 */
  private refreshCommentList() {
    this.$emit('refreshCommentList');
  }

  /** 评论相关操作 */
  public handleOptions(item: any, type: string) {
    const data = {
      commentId: item.id,
      businessType: type
    }
    insertOrUpdateCommentOptions(data).then((res: any) => {
      this.$modal.msgSuccess(res.msg);
      this.refreshCommentList();
    })
  }

  public async addExpand() {
    const imgs: any = document.querySelectorAll("#commentContent img");
    if (imgs != null) {
      for(let i = 0; i<imgs.length; i++){
        imgs[i]['onclick'] = this.expandPhoto;
        imgs[i]['onkeydown'] = this.expandPhoto;
      }
    }
  }

  private expandPhoto(item: any){
    const overlay = document.createElement("div");
    overlay.setAttribute("id","overlay");
    overlay.setAttribute("class","overlay");
    document.body.appendChild(overlay);
    const img = document.createElement("img");
    img.setAttribute("id","expand")
    img.setAttribute("class","overlay-img");
    img.src = item.srcElement.currentSrc;
    const el = document.getElementById("overlay");
    const divImg = document.createElement("div");
    const spanDesc = document.createElement("span");
    spanDesc.setAttribute('class', 'overlay-img-desc');
    spanDesc.innerHTML = '点击图片返回';
    if (el != null) {
      el.appendChild(img);
      el.appendChild(spanDesc);
    }
    img.onclick = this.restore;
  }

  private restore(){
    const el1 = document.getElementById('overlay');
    const el2 = document.getElementById('expand');
    if (el1 != null  && document.body.contains(el1)) {
      document.body.removeChild(el1);
    }
    if (el2 != null && document.body.contains(el2)) {
      document.body.removeChild(el2);
    }

  }

  /** 点击用户列表用户卡片 */
  public handleUserCard(userId: any) {
    this.$router.push({path: '/userCenter?userId=' + userId});
  }

}
</script>
<style scoped lang="scss">
.comment-style {
  display: block;
  margin-top: 10px;
  margin-left: 10px;
  border-left: 1px dashed SlateGray;
}
.comment-box {
  display: none;
}
.comment-list {
  width: 100%;
  margin: 0 auto;
  .p1 {
    float: left;
  }
  .left {
    position:relative;
    display: inline-block;
    width:5%;
    height:0;
    padding-top: 5%;
    cursor: pointer;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      min-height: 30px;
      border-radius: 50%;
    }
  }
  .right {
    display: inline-block;
    width: 93%;
    margin-left: 5px;
  }
  .rightTop {
    height: 30px;
    margin-top: 2px;
    .userName {
      color: #303133;
      margin-left: 10px;
      font-size: 16px;
      font-weight: bold;
    }
    .timeAgo {
      color: #909399;
      margin-left: 10px;
      font-size: 15px;
    }
  }
  .comment-content {
    margin-left: 20px;
    min-height: 50px;
    margin-top: 15px;
    ::v-deep img {
      max-height: 100px;
      max-width: 100px;
      cursor: pointer;
    }
  }
  .comment-tags {
    margin-left: 10px;
    height: 30px;
  }
  .comment-tags .b1 {
    margin-left: 10px;
  }
}
@media only screen and (min-width: 300px) and (max-width: 767px) {
  .comment-list {
    .left {
      display: inline-block;
      width: 30px;
      height: 100%;
    }
    .right {
      display: inline-block;
      width: calc(100% - 35px);
      margin-left: 5px;
    }
  }
}
</style>
<style lang="scss">
.overlay{
  background-color: rgba(0, 0, 0, 0.47); //背景色
  filter:alpha(opacity=100); //透明度
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 1000001;
  overflow:hidden; //滚动条
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  .overlay-img-main {
    height: auto;
  }
  .overlay-img{
    position: relative;
    max-width:80%; //宽度
    max-height: 80%;
  }
  .overlay-img-desc {
    line-height: 50px;
    color: #FFFFFF;
    font-size: 20px;
  }
}
</style>
